<template>
  <el-card body-style="padding:0;">
    <div class="menu-container">
      <ul class="menu-list">
        <li
          v-for="item in menuItems"
          :key="item.index"
          class="menu-item"
          :class="{ 'is-active': isActive(item.index) }"
        >
          <router-link :to="item.index" class="menu-link">
            <span class="menu-indicator" v-show="isActive(item.index)">○</span>
            <span class="menu-title">{{ item.title }}</span>
          </router-link>
          <span class="menu-remove" @click="remove(item)">×</span>
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { useTitleStore } from '@/stores/titleNav.js'
import { useRoute } from 'vue-router'
import router from '@/router';

const titleStore = useTitleStore()
const route = useRoute()

const isActive = (index) => {
  return route.path === index
}

const remove = (item) => {
  titleStore.removeTitinfo(item)
  router.go(-1)
}

const menuItems = ref([])
menuItems.value = titleStore.titleInfo.menuItems
</script>

<style lang="less" scoped>
.menu-container {
  .menu-list {
    display: flex;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    list-style: none;
    padding: 0;

    .menu-item {
      height: 25px;
      text-align: center;
      border-radius: 15px;
      background-color: #d3e3fd;
      margin-right: 10px;
      display: flex;
      align-items: center;
      padding: 0 10px;

      &.is-active {
        background-color: #3f9cca;
      }

      .menu-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: inherit;

        .menu-indicator {
          margin-right: 5px;
        }

        .menu-title {
          font-size: 14px; // Increased font size for better readability
        }
      }

      .menu-remove {
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
